<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue/vue.js"></script>
</head>
<!-- v-on传参
1.默认传参：v-on:click ="changeLength"
2.手动传参：v-on:click="changeLength(length)"
3.手动传递事件对象：v-on:click="changeLength($event)" -->
<body>
    <div id="app">
        <!-- 声明 -->
        <p>{{msg}}，面积：{{msg*msg}}</p>
        <!-- 绑定单击事件 -->
        <button v-on:click="changeLength(1)">单击此处计算面积+1</button>
        <button v-on:click="changeLength(10)">单击此处计算面积+10</button>
        <button v-on:click="changeLEngth" value="10">单击此处计算面积+10</button>
        <button v-on:click="changeLEngth($event)" value="10">单击此处计算面积+10</button>

    </div>


</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                msg: 2,
            }

        },
        // 编写方法
        methods: {
            // 手动传参
            changeLength(a) {
                this.msg += a
            },
            // 形式参数
            changeLEngth(e) {
                console.log(e.target.value)
                this.msg += Number(e.target.value);
            }
            
        }


    })
</script>

</html>